@import './variables.scss';
.lf {
	float: left;
}
.rg {
	float: right;
}

.text-lf {
	text-align: left;
}
.text-rg {
	text-align: right;
}
.text-ct {
	text-align: center;
}
a:hover,
a:visited,
a:active {
	text-decoration: none;
}
@each $dir in (pointer) {
	.cursor-#{$dir} {
		cursor: pointer;
	}
}
.no-select {
	user-select: none;
}
img {
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
	user-drag: none;
}
.font-700 {
	font-weight: 700;
}

.font-700-important {
	font-weight: 700 !important;
}

.font-400 {
	font-weight: 400;
}

.font-400-important {
	font-weight: 400 !important;
}

@each $key, $size in $font-sizes {
	.fs-#{$key} {
		font-size: $size;
	}

	.fs-#{$key}-important {
		font-size: $size !important;
	}
}
@each $key, $color in $colors {
	.text-#{$key} {
		color: $color;
	}
	.text-#{$key}-important {
		color: $color !important;
	}
	.bg-#{$key} {
		background-color: $color;
	}
	.bg-#{$key}-important {
		background-color: $color !important;
	}
}
.no-events {
	pointer-events: none;
}
// text-overflow
.text-ellipsis {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// width height
.w-40 {
	width: 40%;
}
.w-45 {
	width: 45%;
}
.w-48 {
	width: 48%;
}
.w-49 {
	width: 49%;
}
.w-50 {
	width: 50%;
}
.w-80 {
	width: 80%;
}
.w-100 {
	width: 100%;
}
.w-100-important {
	width: 100% !important;
}

.h-100 {
	height: 100%;
}

// flex
.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.d-flex {
	display: flex;
}

.d-inline-flex {
	display: inline-flex;
}
.flex-row {
	flex-direction: row;
}
.flex-column {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

@each $key, $value in $flex-jc {
	.jc-#{$key} {
		justify-content: $value;
	}

	.jc-#{$key}-important {
		justify-content: $value !important;
	}
}

@each $key, $value in $flex-ai {
	.ai-#{$key} {
		align-items: $value;
	}

	.ai-#{$key}-important {
		align-items: $value !important;
	}
}

@for $i from 1 through 20 {
	.flex-#{$i} {
		flex: $i;
	}
}

.flex-grow-1 {
	flex-grow: 1;
}

// spacing
@each $typeKsy, $type in $spacing-types {
	// m-1
	@each $sizeKey, $size in $spacing-sizes {
		.#{$typeKsy}-#{$sizeKey} {
			#{$type}: $size * $spacing-base-size;
		}
	}

	// mx-1  my-1
	@each $sizeKey, $size in $spacing-sizes {
		.#{$typeKsy}x-#{$sizeKey} {
			#{$type}-left: $size * $spacing-base-size;
			#{$type}-right: $size * $spacing-base-size;
		}

		.#{$typeKsy}y-#{$sizeKey} {
			#{$type}-top: $size * $spacing-base-size;
			#{$type}-bottom: $size * $spacing-base-size;
		}
	}

	// mt-1
	@each $directionKey, $direction in $spacing-directions {
		@each $sizeKey, $size in $spacing-sizes {
			// .mt-1{margin-top: 0.25rem}
			.#{$typeKsy}#{$directionKey}-#{$sizeKey} {
				#{$type}-#{$direction}: $size * $spacing-base-size;
			}

			.#{$typeKsy}#{$directionKey}-#{$sizeKey}-important {
				#{$type}-#{$direction}: $size * $spacing-base-size !important;
			}
		}
	}
}

// border
// borders
@each $dir in (top, right, bottom, left) {
	.border-#{$dir} {
		border-#{$dir}: 1px solid map-get($map: $colors, $key: 'blank');
	}
	@each $key, $color in $colors {
		.border-#{$dir}-#{$key} {
			border-#{$dir}: 1px solid $color;
		}
	}
}

// transiton
.transition-all {
	transition: all 0.3s;
}

@each $num in (0, 90, 180, 270, 360) {
	.rotate-#{$num} {
		transform: rotate($num + deg);
	}
}
